<template>
  <div id="packagemanagementlist">
    <el-row>
      <el-col :span="4">
        <div class="div_border_title">
          <h2>套餐管理</h2>
        </div>
      </el-col>
    </el-row>
    <div class="search-box">
      <el-form inline>
        <el-form-item label="套餐名">
          <el-input v-model="package_title"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="doSearch()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="toolbar-box">
      <el-button-group>
        <el-button v-for="(toolbar,index) in toolbarList" :key="index" :type="toolbar.type" :icon="toolbar.icon"
                   @click="getButtonType(toolbar.event)">{{toolbar.name}}
        </el-button>
      </el-button-group>
    </div>
    <el-table :data="serviceList" border highlight-current-row fit @row-click="clickRow"
              @row-dblclick="findPackageDetial">
      <el-table-column type="index" :label="$t('index')" width="100" align="center"></el-table-column>
      <el-table-column prop="package_name" label="套餐名" align="center"></el-table-column>
      <el-table-column prop="money" label="套餐金额/元" width="150" align="center"></el-table-column>
      <el-table-column prop="memo" label="套餐描述" align="center"></el-table-column>
      <el-table-column prop="package_heat" label="热度" width="150" align="center"></el-table-column>
      <el-table-column prop="is_publish" label="状态" :formatter="formatterType" align="center"></el-table-column>
    </el-table>
    <el-pagination @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="total"
                   class="table-page-style"></el-pagination>
  </div>
</template>
<script>
  import { commonNotify } from '../../assets/js/common.js'
  import { postDataToServer } from '../../assets/js/post.js'
  import { getToolBarList } from '../../assets/js/buildStructure/list.js'

  export default {
    name: 'packagemanagementlist',
    data () {
      return {
        reservation_type_data: [],
        serviceList: [],
        toolbarList: [],
        currentID: '',
        currData: '',
        page_no: 1,
        total: 0,
        package_title: '',
        options: [{
          value: '0',
          label: '个人用户'
        }, {
          value: '1',
          label: '企业用户'
        }, {
          value: '2',
          label: '个人和企业'
        }],
      }
    },
    created () {
      this.getToolBars()
      this.getServiceDataList(1)
    },
    methods: {
      formatterType (row, column) {
        if (row.is_publish === 0) {
          return '已发布'
        } else {
          return '未发布'
        }
      },
      clickRow (row, column) {
        this.currentID = row.id
        this.currData = row
      },
      handleCurrentChange (pageNum) {
        this.page_no = pageNum
      },
      //获取列表
      getServiceDataList (pageNum) {
        let _this = this
        let parameter = new Object()
        parameter.page_no = pageNum
        parameter.page_size = 10
        postDataToServer('PACKAGE_LISTPAGE', parameter).then((data) => {
          if (data.status === 0) {
            _this.serviceList = data.data_list
            _this.total = data.total_results
          }
        })
      },
      //查询列表
      doSearch () {
        let _this = this
        let parameter = new Object()
        parameter.page_no = 1
        parameter.page_size = 10
        parameter.package_name = _this.package_title
        postDataToServer('PACKAGE_LISTPAGE', parameter).then((data) => {
          if (data.status === 0) {
            _this.serviceList = data.data_list
            _this.total = data.total_results
          }
        })
      },
      //取得功能按钮
      getToolBars () {
        this.toolbarList = getToolBarList('list', 7)
      },
      //根据不同的按钮执行不同的操作
      getButtonType (type) {
        let _this = this
        switch (type) {
          case 'add':
            _this.addPackage()
            break
          case 'edit':
            _this.edit()
            break
          case 'delete':
            _this.delete()
          default:
            break
        }
      },
      //双击打来详情
      findPackageDetial (row, event) {
        let id = row.id
        let _path = '/dashIndex/packagechoosedetial/' + id
        this.$router.push({
          path: _path
        })
      },
      //编辑
      edit () {
        if (this.currentID !== '') {
          this.$router.push({'path': '/dashIndex/packagechoosedetial/' + this.currentID})
        } else {
          this.$message({
            message: '请选中一行',
            type: 'warning'
          })
        }
      },
      addPackage () {
        this.$router.push({'path': '/dashIndex/packagechoosedetial/newdata'})
      },
      //删除按钮
      delete () {
        let _this = this
        if (_this.currentID !== '') {
          _this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let param = new Object()
            param.id = _this.currentID
            postDataToServer('PACKAGE_DEL', param).then(function (data) {
              if (data.status === 0) {
                _this.$message({
                  message: '删除成功',
                  type: 'success'
                })
                _this.getServiceDataList(_this.page_no)
              } else {
                _this.$message({
                  message: data.message,
                  type: 'warning'
                })
              }
            })
          }).catch(() => {
            _this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        } else {
          this.$message({
            message: '请选中一行',
            type: 'warning'
          })
        }
      },
    },
    watch: {
      page_no (val, oldVal) {
        this.getServiceDataList(val)
      }
    }
  }
</script>

<style scoped>
  #packagemanagementlist {
    padding: 2em;
  }

  .toolbar-box {
    border: 1px solid #20A0FF;
    background-color: #20A0FF;
    margin-top: 20px;
  }

  /*弹出框样式*/
  .dialog-content {
    border: 1px solid #E5E9F2;
  }

  .el-dialog {
    background-color: black;
  }
</style>
